<template>
<el-dialog
      title="困难生类型"
      :visible.sync="openDlg"
      width="40%"
      append-to-body
      destroy-on-close
    >
    <div class="diffName-year">
      <span>
        年份：
      </span>
      <el-date-picker
        v-model="yearStr"
        type="year"
        :format="'yyyy'"
        :value-format="'yyyy'"
        @change="yearStrChange"
        placeholder="选择年">
      </el-date-picker>
    </div>
    
    <el-table :data="tableData">
      <el-table-column label="困难生类型" prop="diffName" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.diffName}}</span>
            <el-input
                v-if="row.optType == 'write'"
                size="mini"
                placeholder="请输入困难生类型"
                v-model="row.diffName">
            </el-input>
        </template>
      </el-table-column>
      <el-table-column label="困难生金额(元/年)" prop="diffMoney" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.diffMoney}}</span>
            <el-input
                v-if="row.optType == 'write'"
                size="mini"
                placeholder="请输入困难生金额(元/年)"
                v-model="row.diffMoney">
            </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.optType == 'read'"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.optType == 'write'"
            @click="handleSave(scope.row)"
          >保存</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row, scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 2px; text-align: center;">
        <el-button icon="el-icon-plus" @click="addType()" type="text">新增</el-button>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openDlg = false">取 消</el-button>
    </div>
</el-dialog>
</template>

<script>
import { 
    queryPoorStudentType,
    savePoorStudentType
 } from "@/api/poorStudent-scholarship/plan.js";
export default {
    name:"addPlan",
    data () {
        return {
            title: '',
            openDlg: false,
            tableData: [],
            yearStr: ''
        }
    },
    created () {
      this.yearStr = new Date().getFullYear() + ''
    },
    methods:{
        yearStrChange (val) {
          this.yearStr = val
          this.getPoorStudentType()
        },
        open () {
          this.openDlg = true
          this.getPoorStudentType()
        },
        getPoorStudentType () {
          queryPoorStudentType({
            yearStr: this.yearStr
          }).then((res) => {
            this.tableData = res.rows.map((item) => {
              item.optType = 'read'
              return item
            })
          })
        },
        handleUpdate (rowdata) {
            rowdata.optType = 'write'
        },
        handleSave (rowdata) {
            rowdata.optType = 'read'
        },
        addType () {
            this.tableData.push({
                diffName: '',
                diffMoney: "",
                optType: 'write',
                yearStr: this.yearStr
            })
        },
        handleDelete (row, index) {
            this.$modal
                .confirm('该计划已经上传了困难生，如删除后该部分数据将同步删除，请确认是否删除。')
                .then(() => {
                  this.tableData = this.tableData.filter((item, i) => {
                    return index != i
                  })
                })
                .catch(() => {});
        },
        submitForm () {
            if (this.tableData.every((item) => {
              return item.diffName && item.diffMoney
            })) {
              savePoorStudentType(this.tableData).then((response) => {
                this.$modal.msgSuccess("保存成功");
                this.openDlg = false;
              });
            } else {
              this.$modal.msgWarning("困难生类型或困难生金额未填写！");
            }
        },
    }

}
</script>

<style lang="scss" scoped>
    .planTotal{
        display: flex;
        font-size: 13px;
        color: #606266;
        &-left{
            margin-left: 30px;
        }
        &-right{
            margin-left: 20px;
        }
    }
    .diffName-year{
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      span{
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 5px;
      }
    }
</style>